<template>
	<view class="detail" v-if="data">
		<scroll-view scroll-y class="main">
			<view class="header">
				<image :src="oss(data.user.avatar)" class="cover" mode=""></image>
				<view class="info">
					<view class="title">
						<view class="l">{{data.name}}</view>
					</view>
					<view class="types">
						<view class="btn">{{data.taskcate.name}}</view>
						<view class=" btn1">{{data.platform}}</view>
					</view>

				</view>
				<view class="moeny">佣金{{data.price}}元</view>
			</view>
			<view class="numBox">
				<view class="num">
					<view class="t">{{data.tasknum}}</view>
					<view class="b">限时完成</view>
				</view>
				<view class="num">
					<view class="t">{{data.checknum}}</view>
					<view class="b">限时审核</view>
				</view>
				<view class="num">
					<view class="t">{{data.acceptnum}}</view>
					<view class="b">已接单数</view>
				</view>
				<view class="num">
					<view class="t">{{data.total_price}}元</view>
					<view class="b">委托赏金</view>
				</view>
			</view>
			<view class="titles">任务说明</view>
			<view class="desc">
				{{data.content}}
			</view>
			<view class="titles">任务步骤/流程</view>
			<view class="steps">
				<template v-for="(item,index) of data.step_text">
					<view class="step" v-if="item.type == '1'">
						<view class="l">
							<image src="../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第{{index+1}}步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="btns">
								<view class="btn" @click="copy(item.content)">复制文字</view>
								<view style="flex: 1;"></view>
							</view>
							<view class="copy" @click="copy(item.url)">复制</view>
							<view class="btns">
								<!-- #ifdef APP -->
								<view class="btn"><uni-link :href="item.url" :showUnderLine="false" color="#FF8007" text="">点击访问链接</uni-link> <image src="../../static/task/link.png" class="icon" mode="">
									</image>
									
								</view>
								<!-- #endif -->
								<view class="btn btn1" @click="copy(item.url)">点击复制链接<image
										src="../../static/task/copy.png" class="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="step" v-if="item.type == '0'">
						<view class="l">
							<image src="../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第{{index+ 1}}步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="btns">
								<view class="btn" @click="copy(item.content)">复制文字</view>
								<view style="flex: 1;"></view>
							</view>
							<image :src="oss(item.image)" mode="widthFix" class="example"  @click="preview(item.image)"></image>
							<view class="btns">
								<view class="btn" @click="down(item.image)">保存图片</view>
								<view style="flex: 1;"></view>
							</view>
							
						</view>
					</view>
				</template>

			</view>
			<view class="titles">上传验证/审核</view>
			<view class="steps">
				<template v-for="(item,index) of data.check_text">
					<view class="step" v-if="item.type == '0'">
						<view class="l">
							<image src="../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第1步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="btns">
								<view class="btn" @click="copy(item.content)">复制文字</view>
								<view style="flex: 1;"></view>
							</view>
							<view class="add">
								<image :src="oss(item.image)" class="example" mode="widthFix"   @click="preview(item.image)"></image>
								<template v-if="data.checknote[index].image">
									<image :src="oss(data.checknote[index].image)" @click="selectImage(index)" style="width: 130rpx;" mode="widthFix"></image>
								</template>
								<view class="addBox"  v-else @click="selectImage(index)">
									
									<template>
										<image src="../../static/task/add.png" class="icon" mode=""></image>
										<view class="word">上传截图</view>
									</template>
								</view>
							</view>
							<view class="btns">
								<view class="btn" @click="down(item.image)">保存图片</view>
								<view style="flex: 1;"></view>
							</view>
						</view>
					</view>
					<view class="step" v-if="item.type == '1'">
						<view class="l">
							<image src="../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第2步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="btns">
								<view class="btn" @click="copy(item.content)">复制文字</view>
								<view style="flex: 1;"></view>
							</view>
							<input type="text" v-model="data.checknote[index].content" class="inputBox" :disabled="!(data.orderStatus === 0 || data.orderStatus === -1)" />
						</view>
					</view>
				</template>

			</view>

		</scroll-view>
		<view class="join" @click="accept" v-if="data.orderStatus === '' ||data.orderStatus === null || data.orderStatus === 2 ||  data.orderStatus === -2">报名做任务赚钱</view>
		<view class="join" @click="save" v-if="data.orderStatus === 0">提交任务</view>
		<view class="join" @click="save" v-if="data.orderStatus === 1">审核中</view>
		<view class="join" @click="save" v-if="data.orderStatus === -1">审核拒绝，重新提交</view>
		<u-popup :show="show" @close="show = false" mode="center">
		          <image :src="url" mode="widthFix" style="width: 750rpx;" @click="show = false" show-menu-by-longpress></image>
				</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				data: '',
				url: '',
				show: false
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			down(url) {
				uni.downloadFile({
				    url: this.oss(url), //仅为示例，并非真实的资源
				    success: (res) => {
				        if (res.statusCode === 200) {
				              uni.saveImageToPhotosAlbum({
				                        filePath: res.tempFilePath,
				                        success: function () {
											uni.$u.toast(`保存成功`)
				                            console.log('save success');
				                        }
				                    });
				        }
				    }
				});
			},
			preview(url) {
				this.show = true
				this.url = this.oss(url)
			},
			save() {
				let finish = true
				for(let i = 0; i< this.data.check_text.length; i++){
					if(this.data.check_text[i].type == '0'){
						if(this.data.checknote[i].image == ''){
							uni.$u.toast('请上传审核任务所需图片')
							finish = false
							break
						}
					}
					if(this.data.check_text[i].type == '1'){
						if(this.data.checknote[i].content == ''){
							uni.$u.toast('请输入审核任务所需资料')
							finish = false
							break
						}
					}
				}
				if(finish){
					uni.$u.http.post('/check', {
						checknote: this.data.checknote,
						id: this.data.task_order_id
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast(res.msg)
							setTimeout(()=> {
								this.back()
							},1000)
						}
					}).catch((res) => {
					
					})
				}
				
			},
			selectImage(index) {
				if(this.data.orderStatus === 0 || this.data.orderStatus === -1 ){
					let that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							that.afterRead(res.tempFilePaths[0], index)
						}
					});
				} else {
					uni.$u.toast('请先报名任务')
				}
				
			},
			// 新增图片
			async afterRead(url, index) {
				console.log(url)
				const result = await this.uploadFilePromise(url)
			
				this.data.checknote[index].image = result
			
			
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data.url)
							} else {
								resolve()
							}
						}
					});
				})
			},
			accept() {
				if (!uni.getStorageSync('token')) {
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				uni.$u.http.post('/taskdetail', {
					type: 'accept',
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						this.data.task_order_id = res.data
						this.data.orderStatus = 0
					}
				}).catch((res) => {

				})
			},
			time(num) {
				if (num < 60) {
					return num + '分钟'
				} else if (num >= 60 && num < 1440) {
					return num / 60 + '小时'
				} else {
					return num / 1440 + '天'
				}
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.$u.toast('复制成功')
					},
					fail: function() {
						uni.$u.toast('复制失败')
					}
				});
			},
			getDetail() {
				uni.$u.http.post('/taskdetail', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						res.data.checknum = this.time(res.data.checknum)
						res.data.tasknum = this.time(res.data.tasknum)
						// let arr = []
						if (!res.data.checknote) {
							res.data.checknote = []
							for (let i = 0; i < res.data.check_text.length; i++) {
								if (res.data.check_text[i].type == '0') {
									// arr.push({
									// 	type: 0,
									// 	image: '',
									// })
									res.data.checknote[i] = {
										type: 0,
										image: '',
									}
								} else {
									res.data.checknote[i] = {
										type: 1,
										content: '',
									}
									// arr.push({
									// 	type: 1,
									// 	content: '',
									// })
								}
							}
						}
						this.data = res.data
						console.log(this.data)
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		height: 100vh;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;

		.main {
			overflow: hidden;
			position: absolute;
			left: 0;
			width: 100%;
			bottom: 120rpx;
			top: 0;
		}

		.titles {
			color: #191615;
			font-size: 34rpx;
			padding: 20rpx 30rpx 10rpx;
			font-weight: bold;
		}

		.join {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #191615;
			border-radius: 44rpx;
			width: 590rpx;
			position: absolute;
			left: 80rpx;
			bottom: 20rpx;
			flex-shrink: 0;
		}

		.steps {
			padding: 20rpx;
		}

		.step {
			display: flex;

			.r {
				flex: 1;
				padding-left: 30rpx;
				position: relative;

				.title {
					color: #575859;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}

				.copy {
					color: #428DFC;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.btns {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.btn {
						flex: 1;
						height: 60rpx;
						background-color: #FFFAE5;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FF8007;
						font-size: 14px;
						.icon {
							width: 23rpx;
							height: 31rpx;
							margin-left: 10rpx;
						}
					}

					.btn1 {
						background-color: #E9F3FF;
						color: #428DFC;
						margin-left: 20rpx;
					}
				}

				.inputBox {
					background: #F6F6F6;
					height: 74rpx;
					line-height: 74rpx;
					padding-left: 20rpx;
					width: 370rpx;
					border-radius: 10rpx;
				}

				.add {
					display: flex;

				}

				.example {
					width: 228rpx;
					margin-bottom: 20rpx;
				}

				.addBox {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					border: 1px solid #FFCE54;
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;

					.icon {
						width: 27rpx;
						height: 27rpx;
						margin-bottom: 10rpx;
					}

					.word {
						color: #FF8007;
						font-size: 22rpx;
					}
				}

				.example:first-of-type {
					margin-right: 20rpx;
				}
			}

			.r::before {
				content: '';
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				background-color: #FFC141;
				border-radius: 8rpx;
				top: 8rpx;
				left: -8rpx;
				z-index: 10;
			}

			.r::after {
				content: '';
				position: absolute;
				left: 0;
				top: 20rpx;
				width: 2px;
				bottom: 0;
				background-color: #F6F6F6;
			}

			.l {
				width: 109rpx;
				height: 43rpx;
				position: relative;
				margin-right: 20rpx;

				.icon {
					width: 109rpx;
					height: 43rpx;
				}

				.word {
					width: 109rpx;
					height: 43rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					position: absolute;
					left: 0;
					top: 0;
					font-size: 22rpx;
					color: #191615;
				}
			}
		}

		.desc {
			color: #575859;
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 10rpx 30rpx;
		}

		.numBox {
			margin: 0 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 0 10rpx rgba(98, 98, 98, 0.2);
			padding: 30rpx 20rpx;

			.num {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.t {
					color: #FF8007;
					font-size: 30rpx;
				}

				.b {
					font-size: 24rpx;
					color: #575859;
				}
			}
		}

		.header {
			display: flex;
			margin: 10rpx 0;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			align-items: center;
			position: relative;

			.cover {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				flex-direction: 0;
				border-radius: 10rpx;
				flex-shrink: 0;
			}

			.address {
				font-size: 25rpx;
				color: #575859;
			}

			.moeny {
				font-size: 30rpx;
				color: #FF5B1A;
				margin-left: 40rpx;
				flex-shrink: 0;
			}

			.info {
				flex: 1;
				overflow: hidden;
				.title {
					display: flex;
					align-items: center;

					.l {
						flex: 1;
						font-weight: bold;
					}

					.r {
						color: #428DFC;
						font-size: 24rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
					}
				}

				.types {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.btn {
						background: #428DFC;
						height: 36rpx;
						border-radius: 18rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.btn1 {
						color: #FF8007;
						font-size: 24rpx;
					}
				}

				.numBox {
					display: flex;
					align-items: center;

					.num {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						margin-left: 10rpx;

						.word {
							color: #428DFC;
						}
					}
				}
			}
		}
	}
</style>
